<template>
  <div>
    <van-tabbar
      v-model="footer_active"
      active-color="#f00"
      inactive-color="#000"
      @change="footerChange"
    >
      <van-tabbar-item icon="home-o">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon.home_red : icon.home_grey" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item icon="search">
        <span>西瓜视频</span>
        <template #icon="props">
          <img :src="props.active ? icon.play_red : icon.play_grey" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item icon="friends-o">
        <span>放映厅</span>
        <template #icon="props">
          <img :src="props.active ? icon.cinema_red : icon.cinema_grey" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item icon="setting-o">
        <span>{{ loginState }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.login_red : icon.login_grey" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import home_red from "../assets/home_red.png";
import home_grey from "../assets/home_grey.png";

import play_red from "../assets/play_red.png";
import play_grey from "../assets/play_grey.png";

import cinema_red from "../assets/cinema_red.png";
import cinema_grey from "../assets/cinema_grey.png";

import login_red from "../assets/login_red.png";
import login_grey from "../assets/login_grey.png";

export default {
  name: "footerWrap",
  data() {
    return {
      footer_active: 0,
      loginState: "未登录",
      icon: {
        home_red: home_red,
        home_grey: home_grey,

        play_red: play_red,
        play_grey: play_grey,

        cinema_red: cinema_red,
        cinema_grey: cinema_grey,

        login_red: login_red,
        login_grey: login_grey,
      },
      routeList: ["/", "/videoPlay", "/cinemaWrap", "/loginWrap"],
    };
  },
  created() {
    let inx = Number(localStorage.getItem("switchTabInx"));
    this.footer_active = inx;
    let _u = localStorage.getItem("u_name");
    let _p = localStorage.getItem("u_password");
    if (_u !== null && _p !== null) {
      this.loginState = "已登录";
    }
    if (this.$route.path === "/loginWrap") {
      this.footer_active = 3;
    }
  },
  methods: {
    footerChange(_inx) {
      localStorage.setItem("switchTabInx", _inx);
      this.$router.push(this.routeList[_inx]);
    },
  },
};
</script>